<template>
  <view style="height: 100vh; background: #fff">
    <view class="main">
      <view class="title">{{ newsDetails?.title }}</view>
      <view class="date">
        {{ newsDetails?.createTime }}
      </view>
      <view class="content">
        <rich-text :nodes="formatRichText(newsDetails?.content)"></rich-text>
      </view>
      <image class="img" :src="newsDetails?.image" mode="widthFix"></image>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { getNewsInfo } from "@/api/my";
import { formatRichText } from "@/utils/commonFn";
const { id } = defineProps<{
  id: string;
}>();
const newsDetails = ref();
onBeforeMount(async () => {
  const res = await getNewsInfo({ id: id });
  newsDetails.value = res.data;
});
</script>

<style lang="less" scoped>
.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #1e1e1e;
  line-height: 84rpx;
}
.date {
  font-size: 30rpx;
  color: #bebebe;
  line-height: 40rpx;
  margin-top: 24rpx;
  margin-bottom: 34rpx;
}
.content {
  font-size: 32rpx;
  color: #333333;
  line-height: 56rpx;
}
.img {
  width: 100%;
  margin-top: 22rpx;
}
</style>
